<template>
    <div class="v-stylepage">
        <div class="top-but" v-if="showTabsHeard">
            <slot name="buttons"></slot>
        </div>
        <div class="next-tabs">
            <div class="tabs-left" :style="{'width': showTabsRight ? '75%':'100%'}">
                <slot name="tabs"></slot>
            </div>
            <div class="tabs-right" v-if="showTabsRight" :style="{'width': showTabsRight ? '23%':'0px'}">
                <slot name="tabs-right"></slot>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name: 'style-page',
    props: {
        showTabsRight: {
            type: Boolean,
            default: () => false
        },
        showTabsHeard: {
            type: Boolean,
            default: () => true
        },
    },
    data() {
        return {}
    },
    mounted() {
    },
    methods: {
        searchclose(){
            this.$refs.search.showSearch = false
            this.$refs.search.searchList = []
            this.$refs.search.isActive = {}
        },
        changePageSize(val) {
            this.$emit('changePageSize', val)
        },
        changeCurrentPage(val) {
            this.$emit('changeCurrentPage', val)
        },
        selectionChange(val) {
            this.selectList = val
            this.$emit('selectionChange', val)
        }
    }
}
</script>

<style scoped lang='scss'>
.v-stylepage {
    /deep/.el-tabs__item{
        padding-left: 20px !important;
    }
    .top-but {
        padding-left: 10px;
        width: 100%;
        height: 46px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .next-tabs{
        display: flex;
        justify-content: space-between;
        height: 100%;
        margin-top: 20px;

    }
    /deep/.el-card{
        margin-bottom: 20px;
        .firstitem{
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            .itembox{
                width: 33%;
                margin-bottom: 30px;
            }
            .itembottombox{
                width: 80%;
                margin-bottom: 30px;
            }
        }
        .formitem{
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            .itembox{
                width: 25%;
                margin-bottom: 30px;
            }
            .itembottombox{
                width: 70%;
                margin-bottom: 30px;
            }
        }
    }
    /deep/.el-card__header{
        padding: 6px 20px;
        background: rgb(224, 227, 230);
        .clearfix{
            font-size: 12px;
        }
    }
    .tabs-right{
        padding: 4px;
        border: 1px #ccc solid;
        .timeblock{
            width: 100%;
        }
        /deep/.el-timeline-item__content{
            display: flex;
            align-items: center;
        }
        /deep/.headerimg{
            margin-right: 10px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #ccc;
        }
        /deep/.el-tab-pane{
            padding: 2px;
        }
    }
}
</style>
